<template>
  <div id="options">
    <top-bar :title="title" v-show="IsTopbar"></top-bar>
    <div class="unsubscribe_box">
      <div class="unsubscribeOne" v-if="Isshow">
        <p class="unsub_text" style="padding-top:20px;">将{{userPhone}}所绑定的账号注销</p>
        <p class="unsub_text">账号注销后以下信息将被清空且无法找回</p>
        <ul class="unsub_list_text">
          <li>
            <span></span>行程信息
          </li>
          <li>
            <span></span>实名认证信息
          </li>
          <li>
            <span></span>发票信息
          </li>
          <li>
            <span></span>个人隐私信息
          </li>
          <li>
            <span></span>优惠券信息
          </li>
          <li>
            <span></span>个人钱包（含充值金额及赠送金额）
          </li>
        </ul>
        <p class="rzBtn" @click="UnsubscribeBtn">注销</p>
      </div>
      <div v-else class="unsubscribe_phone">
        <p class="set_text">验证码已发送至手机号{{userPhone}}</p>
        <md-field>
          <md-input-item v-model="yzm" ref="yzmcode" type="digit" placeholder="请输入短信验证码">
            <md-icon name="yzm_icon" slot="left"></md-icon>
            <span class="get-code-button" slot="right" @click="getcodeBtn">{{codeText}}</span>
          </md-input-item>
        </md-field>
        <p class="unsubscribeBtn" @click="confirmunsubscribeBtn">确认</p>
      </div>
    </div>
    <p class="unsubscribe_one" v-show="unsubscribetip">注：当前账户充值金额{{rechargeAmount}}元，赠送金额{{DonationAmount}}元；</p>
    <p class="unsubscribe_two" v-show="unsubscribetip">充值金额可联系客服退款，赠送金额不可退款！</p>
  </div>
</template>

<script>
import '@/assets/svgs/drjc_telephone.svg';
import '@/assets/svgs/yzm_icon.svg';
import '@/assets/svgs/mima_icon.svg';
import '@/assets/svgs/yincang_icon.svg';
import '@/assets/svgs/xianshi_icon.svg';
import { Tabs, Icon, Field, InputItem, Toast, Dialog } from 'mand-mobile';
import TopBar from '@/components/TopBar';
import Loading from '@/components/loading';
import '@/assets/svgs/tishi.svg';
import { decryptByDESModeEBC, encryptByDESModeEBC } from '@/common/encrypt';
import Utils from '@/common/pakjUtils';
import http from '@/common/http';
export default {
  components: {
    [Tabs.name]: Tabs,
    [Icon.name]: Icon,
    [TopBar.name]: TopBar,
    [Field.name]: Field,
    [Toast.name]: Toast,
    [InputItem.name]: InputItem
  },
  data() {
    return {
      title: '注销账户',
      userPhone: '',
      user_phone: '',
      Isshow: true,
      yzm: '',
      codeText: '获取验证码',
      intervalId: '',
      sec: 60,
      IsTopbar: true,
      rechargeAmount: '',
      DonationAmount: '',
      unsubscribetip: true
    };
  },
  created() {
    if (Utils.isApp()) {
      // 判断当前环境是否在app
      this.IsTopbar = false;
    }
    Loading.show();
    http.post('/pakj/passenger/getUserInfo').then(res => {
      Loading.hide();
      console.log(res.data);
      if (res.data.code === '000000') {
        this.userPhone = this.startFun(decryptByDESModeEBC(res.data.data.user_phone), 3, 4);
        this.user_phone = res.data.data.user_phone;
      } else {
        Dialog.alert({
          title: '提示',
          content: res.data.msg,
          confirmText: '确定'
        });
      }
    });
  },
  mounted() {
    Loading.show();
    http.post('pakj/passenger/valDestoryUser').then(res => {
      Loading.hide();
      this.rechargeAmount = res.data.data.user_charge;
      this.DonationAmount = res.data.data.back_money;
    });
  },
  methods: {
    // 验证码自动聚焦
    changfouce() {
      this.$nextTick(x => {
        this.$refs.yzmcode.focus();
      });
    },
    // 注销账号
    UnsubscribeBtn() {
      this.getUnsubscribeBtn();
    },
    // 判断当前用户是否符合解绑条件
    getUnsubscribeBtn() {
      Loading.show();
      http.post('pakj/passenger/valDestoryUser').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          Dialog.confirm({
            title: '账户注销',
            content: '账号注销后，您的所有信息会被清空且无法找回',
            confirmText: '确定',
            onConfirm: () => {
              // 发送验证码
              this.getCode(false);
            }
          });
        } else if (res.data.code === '000002') {
          // 账户有赠送余额
          Dialog.confirm({
            title: '账户注销',
            content: res.data.msg,
            confirmText: '注销',
            onConfirm: () => {
              // 发送验证码
              this.getCode(false);
            }
          });
        } else {
          Dialog.alert({
            title: '账户注销',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    // 获取验证码
    getCode(type) {
      var data = {
        user_phone: this.user_phone
      };
      Loading.show();
      http.post('pakj/common/getMobileCode', data).then(res => {
        Loading.hide();
        console.log(res.data);
        this.title = '短信验证';
        if (res.data.code === '000000') {
          if (type === true) {
            this.countdown();
          } else {
            this.countdown();
            this.Isshow = false;
          }
          this.unsubscribetip = false;
          this.changfouce();
        } else if (res.data.code === '404405') {
          // 未使用短信
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定',
            onConfirm: () => {
              this.Isshow = false;
              this.unsubscribetip = false;
              this.changfouce();
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    countdown() {
      this.intervalId = setInterval(() => {
        this.countingDown = true;
        this.codeText = this.sec + '秒后重试';
        this.sec = this.sec - 1;
        if (this.sec < 0) {
          clearInterval(this.intervalId);
          this.codeText = '获取验证码';
          this.countingDown = false;
        }
      }, 1000);
    },
    // 重新获取
    getcodeBtn() {
      if (this.countingDown === true) {
        return false;
      }
      this.getCode(true);
    },
    confirmunsubscribeBtn() {
      // 确认注销
      if (!this.yzm) {
        Toast({
          content: '请输入验证码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      if (this.yzm.length !== 6) {
        Toast({
          content: '请输入6位有效验证码',
          duration: 3000,
          hasMask: true
        });
        return false;
      }
      // 验证验证码是否正确
      var data = {
        user_phone: this.user_phone,
        mobileCode: this.yzm
      };
      Loading.show();
      http.post('/pakj/passenger/mobileCodeValidate', data).then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          this.unsunbBtn();
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    unsunbBtn() {
      Loading.show();
      http.post('/pakj/passenger/destoryUser').then(res => {
        Loading.hide();
        if (res.data.code === '000000') {
          localStorage.clear();
          sessionStorage.clear();
          this.$store.commit('resetUser');
          Dialog.alert({
            icon: 'tishi',
            title: '注销成功',
            content: '账户已成功注销，已无法正常登录使用。如要继续使用，请重新注册账户',
            confirmText: '知道了',
            onConfirm: () => {
              if (Utils.isApp()) {
                // 判断当前环境是否在app
                /* eslint-disable */
                var os = Utils.getOSName();
                if ((os === 'Linux' || os === 'Android') && handler) {
                  handler.pageLogin();
                } else if ((os === 'iOS' || os === 'MacOSX') && window.webkit) {
                  window.webkit.messageHandlers.pageLogin.postMessage(JSON.stringify(''));
                }
              } else {
                this.$router.push({
                  name: 'Login'
                });
              }
            }
          });
        } else {
          Dialog.alert({
            title: '提示',
            content: res.data.msg,
            confirmText: '确定'
          });
        }
      });
    },
    startFun(str, frontLen, endLen) {
      var len = str.length - frontLen - endLen;
      var xing = '';
      for (var i = 0; i < len; i++) {
        xing += '*';
      }
      return str.substring(0, frontLen) + xing + str.substring(str.length - endLen);
    }
  }
};
</script>

<style lang="stylus" scoped>
p {
  display: block;
  margin-block-start: 0px;
  margin-block-end: 0px;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
}

.unsubscribe_one {
  margin: 10px 30px;
  font-size: 22px;
  color: #999;
}

.unsubscribe_two {
  margin-left: 70px;
  font-size: 22px;
  color: #999;
}

#options {
  height: 100vh;
  background-color: color-primary-background;
}

.unsubscribe_box {
  padding-top: 20px;
}

.unsubscribeOne {
  background-color: #fff;
  padding-bottom: 40px;
}

.unsubscribe_phone {
  margin-top: 0px;
}

.unsub_text {
  font-size: 28px;
  color: #999;
  margin-left: 32px;
  padding-top: 20px;
}

.unsub_list_text {
  font-size: 28px;
  color: #999;
  margin-left: 40px;
}

.unsub_list_text li {
  padding-top: 20px;
}

.unsub_list_text li span {
  width: 8px;
  height: 8px;
  display: inline-block;
  background-color: #999;
  border-radius: 50%;
  position: relative;
  bottom: 5px;
  right: 8px;
}

.set_text {
  text-align: center;
  padding: 22px 0px 42px 0px;
  font-size: 26px;
  color: #999;
}

.unsubscribeBtn {
  margin: 40px 30px;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  border-radius: 7px;
}

.rzBtn {
  position: fixed;
  bottom: 20px;
  width: 94%;
  height: 98px;
  line-height: 98px;
  font-size: 36px;
  text-align: center;
  background-color: #FF6917;
  color: #fff;
  margin: 0px 3%;
  border-radius: 7px;
}

.get-code-button {
  min-width: 160px;
  height: 48px;
  font-size: 24px;
  margin-right: 90px;
  display: inline-block;
  background-color: #FF6917;
  text-align: center;
  line-height: 48px;
  color: #fff;
  border-radius: 7px;
}
</style>
